<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>加班时长计算器</title>
  <!-- <link rel="stylesheet" href="./css/reset.css" </head> -->
  <link rel="stylesheet" href="./css/weui.min.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/jquery-weui.min.css">
  <link rel="stylesheet" href="./jeDate/skin/jedate.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/jquery-weui.min.js"></script>
  <script src="./js/myshare.js"></script>

<body>
  <!-- 标题panel -->
  <div class="weui_panel weui_panel_access">
    <div class="weui_panel_bd">
      <div class="weui_media_box weui_media_text">
        <h4 class="weui_media_title">加班时长计算器</h4>
        <p class="weui_media_desc">作者：小笑残虹</p>
      </div>
    </div>
  </div>

  <div id="box">
    <div class="weui_cells weui_cells_form">
      <!-- 开始时间 -->
      <div class="weui_cell">
        <div class="weui_cell_hd"><label for="" class="weui_label">开始时间</label></div>
        <div class="weui_cell_bd weui_cell_primary">
          <input type="text" id="startTime" placeholder="请选择加班开始时间">
          <!-- <input class="weui_input" type="datetime-local" value="" placeholder=""> -->
        </div>
      </div>
      <!-- 结束时间 -->
      <div class="weui_cell">
        <div class="weui_cell_hd"><label for="" class="weui_label">结束时间</label></div>
        <div class="weui_cell_bd weui_cell_primary">
          <input type="text" id="endTime" placeholder="请选择加班结束时间">
          <!-- <input class="weui_input" type="datetime-local" value="" placeholder=""> -->
        </div>
      </div>
    </div>
    <a href="javascript:;" id="btn" class="weui_btn weui_btn_primary">确定</a>
    <a href="javascript:;" id="shareBtn" class="weui_btn weui_btn_plain_primary open-popup" data-target="share"
      style="margin-bottom: 20px;">更多</a>
    <!-- <h1>您的加班时长为<span id="result">0.0</span>小时</h1> -->
  </div>
  <!-- 底部遮罩层 -->
  <div id="share" class="weui-popup-container popup-bottom">
    <div class="weui-popup-overlay"></div>
    <div class="weui-popup-modal">
      <!-- 内容 -->
      <div class="weui_grids">
        <a href="javascript:;" id="shareFriends" class="weui_grid js_grid" data-mshare="2" data-id="button">
          <div class="weui_grid_icon">
            <img src="./images/分享.png" alt="">
          </div>
          <p class="weui_grid_label">
            发送给朋友
          </p>
        </a>
        <a href="javascript:;" id="shareQuan" class="weui_grid js_grid" data-mshare="1" data-id="cell">
          <div class="weui_grid_icon">
            <img src="./images/分享2.png" alt="">
          </div>
          <p class="weui_grid_label">
            分享到朋友圈
          </p>
        </a>
        <a href="javascript:;" id="about" class="weui_grid js_grid" data-id="toast">
          <div class="weui_grid_icon">
            <img src="./images/关于.png" alt="">
          </div>
          <p class="weui_grid_label">
            关于
          </p>
        </a>
      </div>
    </div>
  </div>
</body>
<script src="./jeDate/src/jedate.js"></script>
<script type="text/javascript">
  // 解决微信缓存问题
  // document.write("<link rel='stylesheet' type='text/css' href='./css/index.css?v=" + new Date().getTime() + "'>");
  var startDate, endDate;
  var btn = document.querySelector('#btn');
  // var result = document.querySelector('#result');
  var shareBtn = document.querySelector('#shareBtn');
  // 开始时间
  $('#startTime').datetimePicker({
    onClose: function (val) {
      let time = getTime(val.value);
      //日期 转 时间戳 ，不用填写日期格式
      startDate = jeDate.timeStampDate(time);
    },
    onChange: function (val) {
      // result.innerHTML = '0.0';
    }
  });
  // 结束时间
  $('#endTime').datetimePicker({
    onClose: function (val) {
      let time = getTime(val.value);
      //日期 转 时间戳 ，不用填写日期格式
      endDate = jeDate.timeStampDate(time);
    },
    onChange: function (val) {
      // result.innerHTML = '0.0';
    }
  });

  // 拼接日期
  function getTime(arr) {
    return `${arr[0]}-${arr[1]}-${arr[2]} ${arr[3]}:${arr[4]}`
  }

  btn.onclick = function () {
    if (startDate == undefined || endDate == undefined) {
      $.toptip('开始时间和结束时间不能为空', 'warning');
      // $.toast("开始时间和结束时间不能为空", "cancel");
    } else {
      var resultDate = (endDate - startDate) / 3600;
      if (resultDate < 0) {
        $.toast("请正确选择时间", "cancel");
        return
      }
      $.alert(`您的加班时长为${resultDate.toFixed(1)}小时`);
    }
  }

  shareBtn.onclick = function () {
    $("#share").popup();
  }


  // UC和QQ浏览器分享到微信
  // 分享给朋友
  var shareFriends = new mShare({
    title: '加班工时计算器',
    url: 'http://li_ya_xu.gitee.io/work-time/',
    desc: '分享给朋友，一起使用吧！',
    img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601013479907&di=2f016fa85d14f554e7a353fe28350bbe&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F19%2F20171219234358_VRdrH.thumb.700_0.jpeg'
  });
  $('#shareFriends').click(function () {
    // 1 ==> 朋友圈  2 ==> 朋友  0 ==> 直接弹出原生
    shareFriends.init(+$(this).data('shareFriends'));
  });
  // 分享给朋友
  var shareQuan = new mShare({
    title: '加班工时计算器',
    url: 'http://li_ya_xu.gitee.io/work-time/',
    desc: '分享到朋友圈，大家一起用',
    img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601013479907&di=2f016fa85d14f554e7a353fe28350bbe&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F19%2F20171219234358_VRdrH.thumb.700_0.jpeg'
  });
  $('#shareQuan').click(function () {
    // 1 ==> 朋友圈  2 ==> 朋友  0 ==> 直接弹出原生
    shareQuan.init(+$(this).data('shareQuan'));
  });

  $('#about').click(function () {
    //如果参数过多，通过 object 方式传入
    $.alert({
      title: '公众号：小笑残虹',
      text: '关注我，获取开发笔记，一起交流学习。分享功能目前在UC和QQ浏览器内可用',
      onOK: function () {
        //点击确认
        console.log('确定事件的回调')
      }
    });
  })

  // jeDate("#startTime", {
  //   dateCell: "#startTime",
  //   format: "YYYY-MM-DD hh:mm",
  //   isTime: false,
  //   minDate: "2014-09-19 00:00:00",
  //   // 点击确定后的回调
  //   donefun: function (val) {
  //     // console.log(val);
  //     //日期 转 时间戳 ，不用填写日期格式
  //     startDate = jeDate.timeStampDate(val.val);
  //     //时间戳 转 日期 ，默认日期格式（'YYYY-MM-DD hh:mm:ss'）
  //     // jeDate.timeStampDate("1513391722",'YYYY年MM月DD日 hh:mm:ss')    //得到 2017年11月16日 10:35:22
  //   }
  // });
  // jeDate("#endTime", {
  //   dateCell: "#startTime",
  //   format: "YYYY-MM-DD hh:mm",
  //   isTime: false,
  //   minDate: "2014-09-19 00:00:00",
  //   // 点击确定后的回调
  //   donefun: function (val) {
  //     // console.log(val);
  //     endDate = jeDate.timeStampDate(val.val);
  //   },
  // });
</script>

</html>